<template>
  <div>
    <el-input size="small" v-model="jl.name" prefix-icon="el-icon-plus" style="width: 300px"
              placeholder="请输入职位等级" @keydown.enter.native="addJl"></el-input>
    <el-select v-model="jl.titleLevel" placeholder="请选择" size="small" style="margin:5px">
      <el-option
          v-for="item in titleLevels"
          :key="item"
          :label="item"
          :value="item"
      >
      </el-option>
    </el-select>
    <el-button type="primary" size="small" @click="addJl">添加</el-button>
    <el-table
        :data="jobLevelData"
        style="width: 70%"
        @selection-change="handleSelectionChange">
      <el-table-column
          prop="id"
          label="编号"
          width="150">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="titleLevel"
          label="职称">
      </el-table-column>
      <el-table-column
          prop="createDate"
          label="日期">
      </el-table-column>
      <el-table-column
          prop="enabled"
          label="是否启用">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.enable" type="success">已启用</el-tag>
          <el-tag  v-if="!scope.row.enable" type="danger">未启用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)" type="primary" size="small">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button size="small" type="danger" @click="handleDeletes">批量删除</el-button>
    <el-dialog
        title="编辑职称"
        :visible.sync="dialogVisible"
        width="30%">
      <div>
        <el-tag>职位名称</el-tag>
        <el-input v-model="updataJl.name"   style="margin-left: 5px;width: 215px" size="small" ></el-input>
      </div>
      <div>
        <el-tag>职位等级</el-tag>
        <el-select v-model="updataJl.titleLevel" placeholder="请选择" size="small" style="margin:5px">
          <el-option
              v-for="item in titleLevels"
              :key="item"
              :label="item"
              :value="item"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <el-tag style="margin-right: 7px">是否启用</el-tag>
        <el-switch
            v-model="updataJl.enabled"
            active-color="#13ce66"
            inactive-color="#ff4949">
        </el-switch>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="updataJobLevel">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "JoblebelMana",
  data() {
    return {
      dialogVisible:false,
      jl: {
        name: '',
        titleLevel: '',
        createDate:'',
        enabled:false
      },
      multipleSelection:[],
      updataJl:{
        name:'',
        titleLevel: '',
        createDate:'',
        enabled:false
      },
      titleLevels: [
        '正高级',
        '副高级',
        '中级',
        '初级',
        '员级',
        '牛马'
      ],
      jobLevelData:[]
    }
  },
  methods:{
    //初始化职称
    initjbl(){
      axios({
        method:'get',
        url:'/api/system/basic/joblevel/'
      }).then(res=>{
        if(res){
          this.jobLevelData = res.data
        }
      })
    },
    handleSelectionChange(val){
      this.multipleSelection = val
    },
    handleEdit(data){
      Object.assign(this.updataJl,data);
      this.updataJl.createDate = '';
      this.dialogVisible = true
    },
    handleDelete(index,data){
      this.$confirm('此操作将永久删除'+[data.name], '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //删除该行
        axios({
          method:'delete',
          url:`/system/basic/joblevel/{id}${data.id}`,
        }).then(res=>{
          if(res){
            this.initjbl()
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleDeletes(){
      this.$confirm('此操作将永久删除'+this.multipleSelection.length +'条数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = '?';
        this.multipleSelection.forEach(item=>{
          ids+= 'ids='+item.id + '&'
        })
        //删除选中行
        axios({
          method:'delete',
          url:`/system/basic/joblevel/`+ids,
        }).then(res=>{
          if(res){
            this.initPos()
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });



    },
    updataJobLevel(){
      console.log(this.updataJl.enabled)
      axios({
        method:'put',
        url:'/api/system/basic/joblevel/',
        data: this.updataJl
      }).then(res=>{
        if(res){
          console.log(this.updataJl)
          this.initjbl();
          this.dialogVisible = false
        }

      })
    },
    addJl(){
      if(this.jl.name){
        axios({
          method:'post',
          url:'/api/system/basic/joblevel/',
          data:this.jl
        }).then(res=>{

          if(res){
            this.initjbl();
            this.jl.name = ''
          }
        })
      }else {
        this.$message.error('错了哦，不要输入空');
      }

    }
  },
  mounted() {
    this.initjbl();
  }
}
</script>

<style scoped>

</style>